{% extends "base.html" %}

{% block title %}Transmission - Skit Panel{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-6">
    <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold text-gray-800">Transmission</h1>
            <div class="flex space-x-4">
                <button id="refresh-btn" class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md flex items-center transition-colors">
                    <i class="fa fa-refresh mr-2"></i> 刷新
                </button>
            </div>
        </div>

    <!-- 搜索和统计区域 -->
    <div class="bg-white rounded-lg shadow-md p-4 mb-6">
        <div class="flex flex-wrap items-center justify-between gap-4">
            <div class="relative w-full sm:w-auto">
                <input type="text" id="search-input" placeholder="搜索任务..." 
                    class="pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-full sm:w-64">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>
            <div class="flex items-center text-sm text-gray-600">
                <div><i class="fa fa-database mr-1"></i> 总任务: <span id="total-tasks" class="font-semibold">0</span></div>
            </div>
        </div>
    </div>

    <!-- 任务列表 -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">名称</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">大小</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">进度</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">下载速度</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">上传速度</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">已下载</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">已上传</th>
                    </tr>
                </thead>
                <tbody id="tasks-table-body" class="bg-white divide-y divide-gray-200">
                    <!-- 任务列表将通过JavaScript动态生成 -->
                    <tr class="text-center">
                        <td colspan="8" class="px-6 py-12 text-gray-500">
                            <div class="flex flex-col items-center justify-center">
                                <i class="fa fa-spinner fa-spin text-4xl mb-4 text-blue-500"></i>
                                <p>正在加载任务列表...</p>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 分页控件 -->
        <div class="px-6 py-3 flex items-center justify-between border-t border-gray-200 bg-gray-50">
            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                <div>
                    <p class="text-sm text-gray-700">
                        显示 <span id="start-item">0</span> 到 <span id="end-item">0</span> 项，共 <span id="total-items">0</span> 项
                    </p>
                </div>
                <div>
                    <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" id="prev-page">
                            <span class="sr-only">上一页</span>
                            <i class="fa fa-chevron-left"></i>
                        </a>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50" id="page-info">
                            第 1 页，共 1 页
                        </a>
                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" id="next-page">
                            <span class="sr-only">下一页</span>
                            <i class="fa fa-chevron-right"></i>
                        </a>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 添加任务模态框 -->
<div id="add-task-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-lg mx-4 transform transition-all">
        <div class="flex justify-between items-center p-5 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">添加下载任务</h3>
            <button id="close-modal-btn" class="text-gray-400 hover:text-gray-500 focus:outline-none">
                <i class="fa fa-times text-xl"></i>
            </button>
        </div>
        <div class="p-5">
            <form id="add-task-form">
                <div class="mb-4">
                    <label for="torrent-url" class="block text-sm font-medium text-gray-700 mb-1">种子链接或磁力链接</label>
                    <input type="text" id="torrent-url" name="torrent_url" required
                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                </div>
                <div class="mb-4">
                    <label for="save-path" class="block text-sm font-medium text-gray-700 mb-1">保存路径</label>
                    <input type="text" id="save-path" name="save_path"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                    <p class="text-xs text-gray-500 mt-1">留空使用默认路径</p>
                </div>
                <div class="mb-4">
                    <label class="flex items-center">
                        <input type="checkbox" name="start_paused" value="true" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <span class="ml-2 block text-sm text-gray-700">添加后暂停下载</span>
                    </label>
                </div>
                <div class="flex justify-end space-x-3 pt-4 border-t border-gray-200">
                    <button type="button" id="cancel-add-btn" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        取消
                    </button>
                    <button type="submit" id="confirm-add-btn" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        添加
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<link rel="stylesheet" href="{{ url_for('static', filename='css/transmission.css') }}">
<script src="{{ url_for('static', filename='js/transmission.js') }}"></script>
{% endblock %}